<template>
  <div class="segmentPieChart">
      <div class="chart_bd" id="segmentPieChart"></div>
  </div>
</template>

<script>
var segmentPie;
export default {
  name: 'segmentPieChart',
  props: ['occupationMap'],
  data () {
      return {
          segmentPieChart: ''
      }
  },
  watch: {
      occupationMap: function (newQuestion, oldQuestion) {
          this.initSegmentPieChart();
      }
  },
  mounted () {
      this.initSegmentPieChart()
  },
  methods: {
      initSegmentPieChart () {
        segmentPie = this.$echarts.getInstanceByDom(document.getElementById('segmentPieChart'))
        if (segmentPie === undefined) {
            segmentPie = this.$echarts.init(document.getElementById('segmentPieChart'));
        }

        var option = {
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b}: {c} ({d}%)'
            },
            legend: {
                type: 'scroll',
                orient: 'vertical',
                left: 10,
                data: this.occupationMap.occupationList,
                textStyle: {
                    color: '#ccc'
                }
            },
            series: [
                {
                    name: '访问来源',
                    type: 'pie',
                    selectedMode: 'single',
                    radius: [0, '30%'],

                    label: {
                        position: 'inner'
                    },
                    labelLine: {
                        show: false
                    },
                    data: this.occupationMap.industryArr
                },
                {
                    name: '访问来源',
                    type: 'pie',
                    radius: ['40%', '55%'],
                    label: {
                       
                    },
                    data: this.occupationMap.intershipMapArr
                }
            ]
        };
        segmentPie.setOption(option);// 为echarts对象加载数据
      },
      resizeChart () {
          segmentPie.resize()
      }
  },
  beforeDestroy () {
      this.$echarts.dispose(segmentPie);
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.segmentPieChart{
    height: 100%;
}
.chart_bd {
    height: 100%;
}
</style>
